<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        font-size: 0;
      }
      .box {
        width: 600px;
        height: 900px;
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
      }
      .box img {
        width: 600px;
        height: 900px;
      }
      #kzq {
        position: absolute;
      }
      #fyq {
        position: absolute;
        z-index: 100;
        width: 100%;
        bottom: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        list-style: none;
      }
      #fyq li {
        border-radius: 50%;
        text-align: center;
        height: 25px;
        width: 25px;
        line-height: 25px;
        cursor: pointer;
        background-color: #ffffff;
        border: 1px solid #000000;
        font-size: 15px;
        margin: 0 5px;
      }
      #btnL,
      #btnR {
        width: 50px;
        height: 150px;
        position: absolute;
        top: calc((100% - 150px) / 2);
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
      }
      #btnL {
        left: 0;
      }
      #btnR {
        right: 0;
      }
    </style>
  </head>
  <body>
    <div class="box" id="box">
      <div id="kzq">
        <img src="./轮播图img/1.jpg" alt="" />
        <img src="./轮播图img/2.jpg" alt="" />
        <img src="./轮播图img/3.jpg" alt="" />
        <img src="./轮播图img/4.jpg" alt="" />
        <img src="./轮播图img/5.jpg" alt="" />
        <img src="./轮播图img/6.jpg" alt="" />
        <img src="./轮播图img/7.jpg" alt="" />
        <img src="./轮播图img/8.jpg" alt="" />
        <img src="./轮播图img/9.jpg" alt="" />
        <img src="./轮播图img/1.jpg" alt="" />
      </div>
      <ul class="fyq" id="fyq">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </ul>
      <div id="btnL"><</div>
      <div id="btnR">></div>
    </div>
  </body>
  <script>
    var box = document.getElementById("box");
    var kzq = document.getElementById("kzq");

    var btnL = document.getElementById("btnL");
    var btnR = document.getElementById("btnR");

    var fyq = document.getElementById("fyq");
    var fyqYm = fyq.children;

    var time;

    var dq = 0,
      ym = 1;

    var itmeED = 0;

    function move(thisYm) {
      thisYm = thisYm - 1;
      clearInterval(time);
      itmeED = 0;
      var jl = thisYm * 600 - dq;
      time = setInterval(function () {
        var dj = (jl / 3000) * 10;
        itmeED += 10;
        dq += dj;
        kzq.style.left = -dq + "px";
        // console.log(itmeED, dq, jl);
        if (itmeED >= 3000) {
          console.log("thisYm", thisYm);
          if (thisYm == 9) {
            ym = 1;
            console.log("thisYm", ym);
            dq = 0;
            kzq.style.left = "0px";
          }
          clearInterval(time);
          itmeED = 0;
        }
      }, 10);
    }

    btnL.onclick = function () {
      if (ym > 0) {
        ym--;
        move(ym);
      }
    };

    btnR.onclick = function () {
      if (ym < 10) {
        console.log("加");
        ym++;
        console.log(ym);
        move(ym);
      }
    };

    for (var i = 0; i < fyqYm.length; i++) {
      fyqYm[i].onclick = function () {
        ym = Number(this.innerHTML);
        move(ym);
      };
    }
  </script>
</html>
